<template>
  <div class="county_profile_mode_content">
    <div class="county_profile_mode_top_content">
      <div>
         <span @click="to_functionPage">首页 </span> / <span @click="mode_exit">训练模式 </span> / <span> 县区概况测验 </span>
      </div>
      <div>县区概况测验</div>
      <div></div>
    </div>

    <!--    地图区域-->
    <div class="county_profile_mode_left_map">
      <county_profile_mode_map :map_data="topic_now"></county_profile_mode_map>
    </div>
<!--用户操作界面-->
    <div class="county_profile_mode_user_interface">
      <div class="county_profile_mode_user_operation">
        <div class="county_profile_mode_user_operation_title">作答区域</div>
        <div class="county_profile_mode_user_operation_topic_1">如左边界地图所示高亮区域县（区）的行政规划区域为：</div>
        <div class="county_profile_mode_user_operation_input_1">
          <input type="text" placeholder="输入县（区）" v-model="user_input.input_1">
<!--          对-->
          <div class="county_profile_mode_user_operation_input_1_tip status_true" v-if="answer_status.input_1" v-show="show_status.input_1">&#x2714;</div>
<!--          错-->
          <div class="county_profile_mode_user_operation_input_1_tip status_false" v-if="!answer_status.input_1" v-show="show_status.input_1">&#x2718;</div>
        </div>
        <div class="county_profile_mode_user_operation_topic_2">当前高亮区域所示县（区）下辖的乡镇、街道共有多少个？</div>
        <div class="county_profile_mode_user_operation_input_2">
          <input type="text" placeholder="输入数字" v-model="user_input.input_2">
<!--          对-->
          <div class="county_profile_mode_user_operation_input_2_tip status_true" v-if="answer_status.input_2" v-show="show_status.input_2">&#x2714;</div>
<!--          错-->
          <div class="county_profile_mode_user_operation_input_2_tip status_false" v-if="!answer_status.input_2" v-show="show_status.input_2">&#x2718;</div>
        </div>
        <div class="county_profile_mode_user_operation_topic_3">请写出图示高亮区域县（区）下辖的所有乡镇、街道名称：</div>
        <div class="county_profile_mode_user_operation_input_3">
          <textarea placeholder="格式如：东山镇、越州镇、建宁街道、西城街道（中间以顿号或者空格隔开，结尾不需标点符号）" v-model="user_input.input_3"></textarea>
          <!--          对-->
          <div class="county_profile_mode_user_operation_input_3_tip status_true" v-if="answer_status.input_3" v-show="show_status.input_3">&#x2714;</div>
<!--          错-->
          <div class="county_profile_mode_user_operation_input_3_tip status_false" v-if="!answer_status.input_3" v-show="show_status.input_3">&#x2718;</div>
        </div>
        <div class="county_profile_mode_user_operation_all_button">
          <div class="county_profile_mode_user_operation_submit_button" @click="submit">提交</div>
          <div class="county_profile_mode_user_operation_next_button" @click="next_topic">下一题</div>
        </div>
<!--        解析-->
        <div class="position_analysis">
          <div class="position_analysis_title"><strong>*答案解析*</strong>县区：<span>{{analysis_answer.county}}</span>---下辖乡镇街道数量：<span>{{analysis_answer.num}}</span></div>
          <div class="position_analysis_content"><strong>*下辖的所有乡镇街道*</strong><span>{{analysis_answer.towns}}</span></div>
        </div>
      </div>
      <div class="county_profile_mode_records">
        <div class="county_profile_mode_records_title">训练记录</div>
        <div class="county_profile_mode_records_content">
          <div class="county_profile_mode_records_content_list" v-for="(item,index) in records" :key="index">
            <strong>{{index+1}}.</strong>用户输入县（区）为{{item.user_input_county}}，{{item.user_input_num}}个街道乡镇，正确乡镇个数应为：{{item.answer_towns_status.true_num}}。
          </div>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
import county_profile_mode_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/county_profile_mode/county_profile_mode_map";

export default {
  name: "county_profile_mode",
  data(){
    return{
      timer:null,  //提醒定时器
      list:10,
      topic_list:null,   //题库
      topic_now:null,   //当前题目
      analysis_answer: {
        "county":'?',
        "num":'?',
        "towns":'?'
      }, //当前解析
      topic_index:1,  //当前题目题目索引
      user_input:{
        input_1:null,
        input_2:null,
        input_3:null,
      },//用户输入
      answer_status:{
        input_1:false,
        input_2:false,
        input_3:false,
      }, // 作答状态
      show_status:{
        input_1:false,
        input_2:false,
        input_3:false,
      }, // 对/错显示状态
      answer_analysis:{
        height_light:'？',
        belongTo:'？'
      },
      records:[],  //作答记录
      all_county_town_data:null,   //完整乡镇数据
    }
  },
  components:{
    county_profile_mode_map
  },
  created() {
    this.get_topic_list()
  },
  methods:{
    //去首页
    to_functionPage(){
      this.$store.commit('setexit_sure_status',true)
    },
    //模式退出
    mode_exit(){
      this.$store.commit('set_mode_exit_status',false)
      this.$router.replace('/train').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },
    //下一题
    next_topic(){
      //状态重置
      this.show_status.input_1 = false
      this.show_status.input_2 = false
      this.show_status.input_3 = false
      this.answer_status.input_1 = false
      this.answer_status.input_2 = false
      this.answer_status.input_3 = false
      this.user_input.input_1 = null
      this.user_input.input_2 = null
      this.user_input.input_3 = null
      //重置解析
      this.analysis_answer.county = '?'
      this.analysis_answer.num = '?'
      this.analysis_answer.towns = '?'
      //循环题库
      if(this.topic_index >= this.topic_list.length-1){
        this.topic_index = 1
      }
      this.topic_index++
      this.get_topic()
    },
    //提交逻辑
    submit(){
      //用户输入
      let user_input_county = this.user_input.input_1
      let user_input_num = Number(this.user_input.input_2)
      let user_input_towns = this.user_input.input_3
      // console.log('测试数据：',user_input_towns)
      // console.log('数据类型：',typeof user_input_towns)
      //正确答案
      let true_county =  this.topic_now.belongTo
      let true_num = Number(this.county_town_judge().true_num)
      let true_towns = this.county_town_judge().true_towns
      //判空
      if(this.user_input.input_1 !== null && this.user_input.input_2 !== null && this.user_input.input_3 !== null){
          //不为空----判对错
          if(user_input_county === true_county){
            //输入县区正确
            //显示对错符号
            this.show_status.input_1 = true
            this.answer_status.input_1 = true
          }else{
            //输入县区错误
            this.show_status.input_1 = true
            this.answer_status.input_1 = false
          }
          if(user_input_num === true_num){
            //输入数量正确
            this.show_status.input_2 = true
            this.answer_status.input_2 = true
          }else{
            //输入数量错误
            this.show_status.input_2 = true
            this.answer_status.input_2 = false
          }
          //判断输入正确乡镇个数
          let status = this.towns_judge(user_input_towns,true_towns)
          if(status.true_or_false){
            //输入所有乡镇正确
            this.show_status.input_3 = true
            this.answer_status.input_3 = true
          }else{
            //输入所有乡镇错误
            this.show_status.input_3 = true
            this.answer_status.input_3 = false
          }
          //加入作答记录
          this.records.push({
                'user_input_county':user_input_county,
                'user_input_num':user_input_num,
                'user_input_towns':user_input_towns,
                'true_county':true_county,
                'true_num':true_num,
                'true_towns':true_towns,
                'answer_towns_status':status
              }
          )
          //存入解析
          //处理乡镇列表
          let analysis_towns = ''
          for (let i=0;i<true_towns.length;i++){
            analysis_towns = analysis_towns+true_towns[i]+'、'
          }
          //true_towns = analysis_towns  //以顿号分割的形式
          this.analysis_answer.county = true_county
          this.analysis_answer.num = true_num
          this.analysis_answer.towns = analysis_towns
      }else{
        if(this.user_input.input_1 === null){
          this.user_input.input_1 = '请输入'
          this.timer = setTimeout(()=>{
            this.user_input.input_1 = null
          },500)
        }
        if(this.user_input.input_2 === null){
          this.user_input.input_2 = '请输入'
          this.timer = setTimeout(()=>{
            this.user_input.input_2 = null
          },500)
        }
        if(this.user_input.input_3 === null){
          this.user_input.input_3 = '请输入'
          this.timer = setTimeout(()=>{
            this.user_input.input_3 = null
          },500)
        }
      }


    },
    //判断用户输入乡镇与正确乡镇
    towns_judge(user_input,true_input){
      //初始化正误以及正确个数返回值
      let status = {
        true_or_false:false,
        true_num:0
      }
      //对用户输入转化为列表
      let userinput_list = user_input.split(/[ 、 ]+/)  //匹配一个或多个空格或顿号
      // console.log('列表化的用户输入：', userinput_list)
      //对用户输入进行去重
      let userinput_distinct = [...new Set(userinput_list)]
      // console.log('去重后的用户输入：',userinput_distinct)
      //判断用户输入的正确个数
      let user_true_town_num = 0
      for (let i=0;i<userinput_distinct.length;i++){
        for (let j=0;j<true_input.length;j++){
          if(userinput_distinct[i] === true_input[j]){
            user_true_town_num++
            continue
          }
        }
      }
      //判断正误
      if(user_true_town_num === true_input.length){
         status.true_or_false = true
         status.true_num = true_input.length
      }else{
         status.true_or_false = false
         status.true_num = true_input.length
      }
      // console.log('正确乡镇个数：',true_town_num)
      return status
    },
    //计算县区下辖的乡镇街道数量以及所有乡镇街道数据
    county_town_judge(){
      let all_data = this.all_county_town_data
      //正确答案
      let true_county =  this.topic_now.belongTo
      let true_num = 0
      let true_towns = null
      //寻找正确答案县区
      for (let i=0;i < all_data.length;i++){
        if(all_data[i].county_name === true_county){
          true_num = all_data[i].towns.length
          true_towns = all_data[i].towns
        }
      }
      return {
          'true_num':true_num,
          'true_towns':true_towns
        }
    },
    //获取父组件传回的题库
    get_topic_list(){
      this.topic_list = this.$store.state.mode_topic_list
      // console.log('random页面的题库数据：',this.topic_list)
      //去重
      this.deduplication()
      //获取完整乡镇数据
      this.all_county_town_data = this.$store.state.all_county_town_data
      // console.log('all_county_town_data ：',this.all_county_town_data)
    },
    //数据去重
    deduplication(){
      //去重---传递给地图组建
       const new_list = this.topic_list.filter((obj,index,self) =>
          index === self.findIndex((t) => (
              t.belongTo === obj.belongTo
           ))
       )
      this.topic_list = new_list
      //获取题库后首题由页面挂载完成之后显示
      this.get_topic()
    },
    //生成单独题目
    get_topic(){
      this.topic_now = this.topic_list[this.topic_index-1]
      // console.log('country页面的数据：',this.topic_now)
      //同时当前题目将传递给子组件地图，使用props绑定子组件传递
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.mode_exit()
  }
}
</script>

<style scoped>
  .county_profile_mode_content{
    width: 69vw;
    height:  90vh;
    /*background-color: #092d45;*/
  }
  .county_profile_mode_top_content{
    width: 69vw;
    height: 10vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #565756;
    position: absolute;
    top: 0;
  }
  .county_profile_mode_top_content div{
    width: 33%;
    height: 100%;
    /* margin-right: 1px; */
    /* background-color: #09fab6; */
    float: left;
  }
  .county_profile_mode_top_content div:nth-child(2){
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
    color: white;
    font-weight: bolder;
  }
  .county_profile_mode_top_content div:nth-child(1){
    box-sizing: border-box;
    padding-left: 1vw;
    text-align: left;
    line-height: 10vh;
    color: white;
    font-size: 0.6vw;
  }
  .county_profile_mode_top_content div:nth-child(1):hover{
    cursor: pointer;
  }
  .county_profile_mode_top_content div:nth-child(1) span:hover{
    color: #0aa2e8;
  }
  .mode_exit{
    width: 3vw;
    height: 5vh;
    /*background-color: red;*/
    position: relative;
    top: 2.5vh;
    left: 65vw;
    text-align: center;
    /*line-height: 5vh;*/
    float: left;
  }
  .mode_exit i{
    position: relative;
    top: -3vh;
    font-size: 2vw;
    /*background-color: yellow;*/
  }
  .mode_exit i:hover{
    cursor: pointer;
    color: red;
  }
  .mode_exit i:active{
    cursor: pointer;
    color: green;
    font-size: 2.2vw;
  }
  .county_profile_mode_left_map{
    width: 35vw;
    height: 78vh;
    background-color: #727473;
    border-radius: 10px;
    /*float: left;*/
    position: relative;
    top: 12vh;
  }

  .county_profile_mode_user_interface{
    width: 33vw;
    height: 78vh;
    /*background-color: #2de7b2;*/
    position: relative;
    top: -66vh;
    left: 36vw;
    color: #14d935;
    box-sizing: border-box;
  }
  .county_profile_mode_user_operation{
    width: 33vw;
    height: 56vh;
    background-color: #696a6d;
    border-radius: 10px;
    border: 1px dashed black;
    overflow: hidden;
    box-sizing: border-box;
  }
  .county_profile_mode_records{
    width: 33vw;
    height: 20vh;
    background-color: #343436;
    margin-top: 2vh;
    border-radius: 10px;
    border: 1px dashed black;
    border-bottom: 5px solid black;
    overflow: hidden;
    box-sizing: border-box;
  }
  .county_profile_mode_user_operation_title{
    width: 33vw;
    height: 3vh;
    background-color: #6b6d6c;
    text-align: center;
    line-height: 3vh;
    font-weight: bolder;
    box-sizing: border-box;
    border-bottom: 1px dashed black;
  }
  .status_true{
    color: #0a3ae8;
  }
  .status_false{
    color: red
  }
  .county_profile_mode_user_operation_topic_1{
    width: 33vw;
    height: 5vh;
    /* background-color:#eae29c; */
    box-sizing: border-box;
    text-align: left;
    line-height: 5vh;
    padding-left: 0.5vw;
    font-size: 0.9vw;
  }
  .county_profile_mode_user_operation_input_1{
    width: 33vw;
    height: 5vh;
    /* background-color: #9ceab2; */
    /*background-color: #ef1183;*/
  }
  .county_profile_mode_user_operation_input_1 input{
    width: 6vw;
    height: 3vh;
    /* background-color: #97d59a; */
    position: relative;
    top: 0.8vh;
    left: calc(50% - 2.5vw);
    border: none;  /*去除默认边框*/
    outline: none;   /*去除选中时的高亮边框*/
    border: 1px #0945fa dashed;
    color: white;
    box-sizing: border-box;
    color: #cc0dee;
    text-align: center;
  }
  .county_profile_mode_user_operation_input_1 input:focus{
    border: 1px #079aea dashed;
    background-color: #36e6f3;
  }
  .county_profile_mode_user_operation_input_1_tip{
    width: 3vw;
    height: 4vh;
    /*background-color: #0caff1;*/
    position: relative;
    top: -3vh;
    left: 20vw;
    text-align: center;
    line-height: 4vh;
    font-size: 2vw;
  }
  .county_profile_mode_user_operation_topic_2{
    width: 33vw;
    height: 5vh;
    /* background-color: #9ceab2; */
    box-sizing: border-box;
    text-align: left;
    line-height: 5vh;
    padding-left: 0.5vw;
    font-size: 0.9vw;
  }
  .county_profile_mode_user_operation_input_2{
    width: 33vw;
    height: 5vh;
    /* background-color:#9ceab2; */
    /*background-color: #ef1183;*/
  }
  .county_profile_mode_user_operation_input_2_tip{
    width: 3vw;
    height: 4vh;
    /*background-color: #0caff1;*/
    position: relative;
    top: -3vh;
    left: 20vw;
    text-align: center;
    line-height: 4vh;
    font-size: 2vw;
  }
  .county_profile_mode_user_operation_input_2 input{
    width: 6vw;
    height: 3vh;
    /* background-color:  #97d59a; */
    position: relative;
    top: 0.8vh;
    left: calc(50% - 2.5vw);
    border: none;  /*去除默认边框*/
    outline: none;   /*去除选中时的高亮边框*/
    border: 1px #0959fa dashed;
    color: white;
    box-sizing: border-box;
    color: #cc0dee;
    text-align: center;
  }
  .county_profile_mode_user_operation_input_2 input:focus{
    border: 1px #079aea dashed;
    background-color:#36e6f3;
  }
  .county_profile_mode_user_operation_topic_3{
    width: 33vw;
    height: 5vh;
    /* background-color: #9ceab2; */
    box-sizing: border-box;
    text-align: left;
    line-height: 5vh;
    padding-left: 0.5vw;
    font-size: 0.9vw;
  }
  .county_profile_mode_user_operation_input_3{
    width: 33vw;
    height: 10vh;
    /* background-color: #9ceab2; */
  }
  .county_profile_mode_user_operation_input_3_tip{
    width: 3vw;
    height: 4vh;
    /*background-color: #0caff1;*/
    position: relative;
    top: -3vh;
    left: 19vw;
    text-align: center;
    line-height: 4vh;
    font-size: 2vw;
  }
  .county_profile_mode_user_operation_input_3 textarea{
    width: 32.5vw;
    height: 9vh;
    /* background-color: #97d59a; */
    position: relative;
    top: 0.5vh;
    left: 0.2vw;
    border: none;  /*去除默认边框*/
    outline: none;   /*去除选中时的高亮边框*/
    border: 1px #0929fa dashed;
    color: white;
    box-sizing: border-box;
    color: #cc0dee;
    /*text-align: center;*/
    padding: 10px;
    resize: none;   /*禁止拉伸*/
  }
  .county_profile_mode_user_operation_input_3 textarea:focus{
    border: 1px #079aea dashed;
    background-color: #36e6f3;
  }
  .county_profile_mode_user_operation_all_button{
    width: 33vw;
    height: 7vh;
    background-color:  #606360;
  }
  .county_profile_mode_user_operation_all_button div{
    border: 1px dashed black;
    color: #f50348;
  }
  .county_profile_mode_user_operation_submit_button{
    width: 4vw;
    height: 3vh;
    background-color: #1ad5a9;
    position: relative;
    top: 2vh;
    left: 7vw;
    border-radius: 10px;
    text-align: center;
    line-height: 3vh;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .county_profile_mode_user_operation_next_button{
    width: 4vw;
    height: 3vh;
    background-color: #1ad5a9;
    position: relative;
    top: -1vh;
    left: 20vw;
    border-radius: 10px;
    text-align: center;
    line-height: 3vh;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .county_profile_mode_user_operation_all_button div:hover{
    background-color: #31a1ec;
    cursor: pointer;
    box-shadow: 1px 1px 1px black;
    border: 1px solid black;
    font-weight: bolder;
  }
  .county_profile_mode_user_operation_all_button div:active{
    background-color: #e8c30a;
    box-shadow: 1px 1px 1px 1px #e21111;
    color: greenyellow;
  }

  .position_analysis{
    width: 33vw;
    height: 10vh;
    background-color: #606360;
    box-sizing: border-box;
  }
  .position_analysis span{
    color: #ec7711;
  }
  .position_analysis_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #16d219;*/
    padding-left: 0.5vw;
    box-sizing: border-box;
    line-height: 3vh;
    border-top: 1px dashed black;
  }
  .position_analysis_content{
    width: 33vw;
    height: 7.5vh;
    background-color: #606360;
    padding-top: 0.1vw;
    padding-bottom: 0.1vw;
    padding-left: 0.5vw;
    box-sizing: border-box;
    font-size: 0.7vw;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .position_analysis_content::-webkit-scrollbar{
    display: none;
  }



  .county_profile_mode_records_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #0fe8c7;*/
    background-color: #343436;
    color: #0ae80a;
    text-align: center;
    line-height: 3vh;
    font-weight: bolder;
    box-sizing: border-box;
    border-bottom: 1px solid black;
  }
  .county_profile_mode_records_content{
    width: 32vw;
    height: 17vh;
    background-color: #343436;
    line-height: 3vh;
    box-sizing: border-box;
    position: relative;
    top: 1vh;
    left: calc(50% - 16vw);
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .county_profile_mode_records_content::-webkit-scrollbar{
    display: none;
  }
  .county_profile_mode_records_content_list{
    width: 32vw;
    height: 6vh;
    /*background-color: greenyellow;*/
    margin-top: 0.5vh;
    /*line-height: 4vh;*/
    box-sizing: border-box;
    padding-left: 0.5vw;
    /*text-align: center;*/
    /*border-bottom: 1px dashed yellow;*/
  }
</style>